<!--审核流程进度-->

<template>
  <div class="box" style="max-height: 300px;overflow-y: auto;padding: 10px;">
    <p>
      <span class="titleName">操作记录：</span>
    </p>
    <a-timeline mode="left" v-if="courseData.length > 0">
      <a-timeline-item v-for="(item,index) in courseData" :key="index">
        <i slot="dot" class="iconfont"
           :class="
                  item.opTypeDesc == '提交' ? 'icon-icon-tijiao blue' :
                  item.opTypeDesc == '转审' ? 'icon-icon-zhuanshen blue' :
                  item.opTypeDesc == '通过' ? 'icon-icon-shenhetongguo green' :
                  item.opTypeDesc == '拒绝' ? 'icon-icon-shenhejujue red' :
                  item.opTypeDesc == '申诉' ? 'icon-icon-zhuanshen red' :
                  item.opTypeDesc == '驳回' ? 'icon-icon-bohui red' : 'icon-icon-daishenhe gray'
           "
        ></i>
        <span class="name"
              :class="
                      item.opTypeDesc == '提交' ? 'blue' :
                      item.opTypeDesc == '转审' ? 'blue' :
                      item.opTypeDesc == '通过' ? 'green' :
                      item.opTypeDesc == '拒绝' ? 'red' :
                      item.opTypeDesc == '驳回' ? 'red' :
                      item.opTypeDesc == '申诉' ? 'red' : 'gray'
              "
        >
          {{
            item.opTypeDesc == '提交' ? '提交审核' :
            item.opTypeDesc == '通过' ? '审核通过' :
            item.opTypeDesc == '拒绝' ? '审核拒绝' : item.opTypeDesc
          }}
        </span>
        <div class="reform">
          <div>
            <p>
              <span style="margin-right: 20px;" v-if="item.opTypeDesc == '转审'">
                {{item.opUserName}}
              </span>
              <span style="margin-right: 20px;" v-else-if="item.opTypeDesc == '驳回'">
                {{item.opUserName}}
              </span>
              <span v-if="item.opUserName" class="newTitle">
                {{
                  item.opTypeDesc == '提交' ? '提交人：' :
                  item.opTypeDesc == '申诉' ? '提交人：' :
                  item.opTypeDesc == '转审' ? '转审给' :
                  item.opTypeDesc == '驳回' ? '驳回给' : '操作人：'
                }}
              </span>
              <j-ellipsis v-if="item.opTypeDesc == '转审'" :value="item.opObj ? item.opObj : ''" :length="15" />
              <j-ellipsis v-else-if="item.opTypeDesc == '驳回'" :value="item.opObj ? item.opObj : ''" :length="15" />
              <j-ellipsis v-else :value="item.opUserName ? item.opUserName : ''" :length="15" />
            </p>
            <p v-if="item.opDesc">
              <span class="title">审核意见：</span>
              <j-ellipsis :value="item.opDesc" :length="15" />
            </p>
          </div>
          <span class="time">{{ item.opTime }}</span>
        </div>
      </a-timeline-item>
    </a-timeline>
    <span v-else>
      暂无数据
    </span>

  </div>
</template>

<script>
import { getQueryWorkRecord } from '@/api/api'
export default {
  name: 'auditProcess',
  data(){
    return{
      oneStatus: true,
      twoStatus: false,
      threeStatus: true,
      result:{},
      courseData: []
    }
  },
  props: ['bizId','flowCode'],
  watch:{
    bizId: {
      handler(val) {
        if(Object.prototype.toString.call(val)==='[object String]' && val.length>0){
          this.getDataList();
        }
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    if(this.bizId && this.flowCode){
      this.getDataList();
    }
  },
  methods:{
    // 初始获取数据
    getDataList(){
      let params = {};
      params.flowCode = this.flowCode;    //流程编码
      params.flowNo = this.bizId;    //业务主键ID
      getQueryWorkRecord(params).then(res => {
        if (res.success){
          // let data = res.result;
          // if (data.length > 0){
          //   this.courseData = data.filter(function(item) {
          //     return item.opTypeDesc != '领取' && item.opTypeDesc != '释放'
          //   })
          // }else {
          //   this.courseData = res.result || [];
          // }
          this.courseData = res.result || [];
        }else{
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .box{
    width: 50%;
    i{
      font-size: 16px;
    }
    .name{
      white-space: nowrap;
    }
  }

  .newTitle{
    min-width: 60px;
    display: inline-block;
  }


/deep/.ant-timeline-item-content{
  display: flex;
  justify-content: space-between;
}
/deep/.ant-timeline-item-last > .ant-timeline-item-content{
  min-height: 10px;
}

.titleName{
  margin-bottom: 5px;
  display: inline-block;
}

  .reform{
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }


  .green{
    color: #32bc51;
  }
  .gray{
    color: #bbbbbb;
  }
  .blue{
    color: #022EA0;
  }
  .red{
    color: #f7434c;
  }
  .orange{
    color: #ffac56;
  }

  //修改时间轴的线条色
  /deep/.ant-timeline-item-tail{
    border-left: 1px solid #3659b3;
  }
</style>
